<template>
	<!-- 保养工单详情 -->
	<div>
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='closeMask' :close-on-press-escape='false'
		 title="保养工单详情" :visible.sync="detailShow">
			<div class="content" v-loading="loading1">
				<el-button type="primary" size="mini" class='goOut' @click='daoChu' v-show="!loading1">导出</el-button>
				<div class="content-item">
					<div class="content-item-main"><i>电梯注册号：<span>{{register_code}}</span></i></div>
					<div class="content-item-main"><i>电梯类型：<span>{{elevator_type}}</span></i></div>
					<div class="content-item-main"><i>维保类型：<span>{{maintain_type}}</span></i></div>
				</div>
				<div class="content-item">
					<div class="content-item-main "><i>保养日期：<span>{{task_end_time}}</span></i><span></span></div>
					<div class="content-item-main "><i>维保人员签名：</i><span></span></div>
					<div class="content-item-main "><i>使用单位签名：</i><span></span></div>
				</div>
				<div class="content-item">
					<div class="content-item-main spe"><i>保养记述：<span>{{maintenance_report}}</span></i></div>
					<div class="content-item-main spe flex-con"><span class="cursor imgShowi" @click="closeImgMask(maintain_sign_image)"
						 :style="{backgroundImage:'url('+maintain_sign_image+')'}"></span></div>
					<div class="content-item-main spe flex-con"><span class="cursor imgShowi" @click="closeImgMask(signature)" :style="{backgroundImage:'url('+signature+')'}"></span></div>
				</div>
				<div class="content-item">
					<div class="content-item-main"><i>内部编号(楼号)：<span>{{internal_no}}</span></i></div>
					<div class="content-item-main"><i>电梯工号：<span>{{elevator_no}}</span></i></div>
					<div class="content-item-main"></div>
				</div>
				<div class="content-item">
					<div class="content-item-main "><i>维保单位：<span>{{maintain_company_name}}</span></i></div>
					<div class="content-item-main"><i>开始时间：<span>{{task_start_time}}</span></i></div>
					<div class="content-item-main"><i>结束时间：<span> {{task_end_time}}</span></i></div>
				</div>
				<div class="content-item">
					<div class="content-item-main width100"><i>使用单位：<span>{{property_company_name}}</span></i></div>
				</div>
				<div class="contentArr">
					<div class="contentArritem">
						<span style="color: #909399;width: 4%;">序号</span>
						<span style="color: #909399;">维保项目（内容)</span>
						<span style="color: #909399;">维保基本要求</span>
						<span style="color: #909399;width: 6%">记录</span>
					</div>
					<div class="contentArritem" v-for="(item,index) in resultArr" :key='index'>
						<span style="width: 4%;">{{index+1}}</span>
						<span :title="item.ckitem">{{item.ckitem}}</span>
						<span :title="item.ckcontent">{{item.ckcontent}}</span>
						<span style="width: 6%;" :title="item.ckvalue">{{item.ckvalue}}</span>
					</div>
					<div class="extraArr" v-for="(item) in extra" :key='item.materials'>
						<span class="des" style="width: 33%;"><i style="color: #909399;">位置：</i>{{item.materials}}</span>
						<span class="des" style="width: 33%;"><i style="color: #909399;">材料名称：{{item.note}}</i></span>
						<div class="desImgF" style="width: 33%;">
							<span class="desImg" :style="{backgroundImage:'url('+item.image+')'}" @click="closeImgMask(item.image)"></span>
						</div>
					</div>
					<div id="content" v-if='recordUnit && roleId == 0'>
						<div class="recode1"> {{recordUnit}}</div>
						<el-button style='margin-top: 10px;' type="primary" @click="copy">复制所有请求信息</el-button>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeMask">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog custom-class="imgDialogShow" :visible.sync="imgDialogShow" :append-to-body='true' :before-close='closeImgMask'>
			<img :src="imgUrl" alt="">
		</el-dialog>
	</div>
</template>
<script>
	import {
		axiosPost,
		axiosGet,
		loadFn,
		loading,
		AllLoading
	} from "@/common.js"
	export default {
		props: ['detailShow', 'rowId'],
		mounted() {
			this.getList()
		},
		computed: {
			roleId() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ""
				}
			},
		},
		data() {
			return {
				register_code: '',
				elevator_type: '',
				maintain_type: '',
				task_end_time: '',
				maintain_sign_image: '',
				signature: '',
				imgMaskShow: false,
				imgUrl: '',
				maintenance_report: '',
				maintain_company_name: '',
				property_company_name: '',
				resultArr: [],
				extra: [],
				activeNames: ['1'],
				recordUnit: '',
				loading1: true,
				imgDialogShow: false,
				url: '',
				internal_no: '',
				elevator_no: '',
				task_start_time: '',
			}
		},
		methods: {
			//导出
			daoChu() {
				this.$confirm('此操作将导出该工单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					loadFn()
					let url = '/maintain/task/download/?task=' + this.rowId
					axiosGet(url, {}, (res) => {
						if (res.code == 0) {
							window.open(res.detail, 'target')
						} else {
							this.$message.error(res.detail.result)
						}
						AllLoading.close()
					})
				}).catch(() => {});
			},
			copy() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content'));

				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中

				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			closeImgMask(img) {
				if (img) {
					this.imgUrl = img
					this.imgDialogShow = !this.imgDialogShow
				}

			},
			getList() {
				let id = this.rowId
				axiosGet('/maintain/task/' + id + '/', {}, (res) => {
					if (res.code == 0) {
						this.loading1 = false
						this.recordUnit = Object.keys(res.detail.record).length > 0 ? res.detail.record : ""
						this.elevator_type = res.detail.elevator_type
						this.register_code = res.detail.register_code
						this.maintain_company_name = res.detail.maintain_company_name
						this.property_company_name = res.detail.property_company_name
						this.maintain_sign_image = res.detail.maintain_sign_image
						this.signature = res.detail.signature
						this.internal_no = res.detail.internal_no
						this.elevator_no = res.detail.elevator_no
						if (res.detail.task_end_time) {
							this.task_end_time = res.detail.task_end_time
						}
						if (res.detail.task_start_time) {
							this.task_start_time = res.detail.task_start_time
						}
						if (!!res.detail.result) {
							let result = JSON.parse(res.detail.result)
							this.maintenance_report = result.maintenance_report
							this.extra = result.extra
							this.resultArr = result.selects
						}
						console.log(res.detail.maintain_type)
						if (res.detail.maintain_type == 90) {
							this.maintain_type = '国标-液压电梯-年度'
						} else if (res.detail.maintain_type == 100) {
							this.maintain_type = '国标-液压电梯-季度'
						} else if (res.detail.maintain_type == 110) {
							this.maintain_type = '国标-液压电梯-半月'
						} else if (res.detail.maintain_type == 120) {
							this.maintain_type = '国标-液压电梯-半年';
						} else if (res.detail.maintain_type == 130) {
							this.maintain_type = '国标-杂物电梯-年度';
						} else if (res.detail.maintain_type == 140) {
							this.maintain_type = '国标-杂物电梯-季度';
						} else if (res.detail.maintain_type == 150) {
							this.maintain_type = '国标-杂物电梯-半月';
						} else if (res.detail.maintain_type == 160) {
							this.maintain_type = '国标-杂物电梯-半年';
						} else if (res.detail.maintain_type == 170) {
							this.maintain_type = '国标-曳引电梯-年度';
						} else if (res.detail.maintain_type == 180) {
							this.maintain_type = '国标-曳引电梯-季度';
						} else if (res.detail.maintain_type == 190) {
							this.maintain_type = '国标-曳引电梯-半月';
						} else if (res.detail.maintain_type == 200) {
							this.maintain_type = '国标-曳引电梯-半年';
						} else if (res.detail.maintain_type == 210) {
							this.maintain_type = '国标-自动扶梯-年度';
						} else if (res.detail.maintain_type == 220) {
							this.maintain_type = '国标-自动扶梯-季度';
						} else if (res.detail.maintain_type == 230) {
							this.maintain_type = '国标-自动扶梯-半月';
						} else if (res.detail.maintain_type == 240) {
							this.maintain_type = '国标-自动扶梯-半年';
						}
					} else {
						console.log('获取失败')
					}

				})
			},
			closeMask() {
				this.$emit('maskShow', !this.detailShow)
			}
		}
	}
</script>

<style scoped lang="less">
	.spe {
		height: 100px !important;
	}

	.imgMask {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(100, 100, 100, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 333333;

		.img {
			min-width: 350px;
			height: 70%;
			border-radius: 5px;
			background: #fff;
			position: relative;
			background-size: cover;

			.close {
				position: absolute;
				font-size: 20px;
				border-radius: 50%;
				border: 1px solid #333;
				right: -10px;
				top: -10px;
				cursor: pointer;
			}
		}
	}

	.cursor {
		cursor: pointer;
	}

	.noWidth {
		width: 132px !important;
	}

	.width100 {
		width: 100% !important;
	}

	#content {
		padding: 20px;
		box-sizing: border-box;
		height: 260px;
		overflow: hidden;
		border: 1px solid rgba(200, 200, 200, .5);

		.recode1 {
			height: 87%;
			overflow: auto;
			font-size: 13px;
			white-space: pre;
			text-align: left;
		}
	}

	.imgShowi {
		height: 100%;
		background-size: cover;
		width: 25%;
		display: inline-block;
	}

	.content {
		padding: 10px;
		box-sizing: border-box;
		height: 400px;
		overflow-y: auto;
		line-height: 20px;

		.content-item {
			display: flex;
			flex-direction: row;
			// margin-bottom: 15px;

			.content-item-main {
				width: 33.33%;
				height: 20px;
				line-height: 20px;
				text-align: left;
				border: 1px solid rgba(200, 200, 200, .5);
				padding: 10px;

				i {
					width: 100%;
					display: inline-block;
					text-align: right;
					font-size: 14px;
					color: #909399;
					text-align: left;

					span {
						color: #777;
					}
				}
			}
		}

		.contentArr {
			width: 100%;
			height: 300px;
			font-size: 13px;

			.contentArritem {
				display: flex;
				align-items: center;
				justify-content: center;

				// height: 20px;
				// margin-bottom: 10px;

				span {
					display: inline-block;
					width: 46%;
					height: 100%;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border: 1px solid rgba(200, 200, 200, .5);
					padding: 10px;
					text-align: left;
				}
			}

			.extraArr {
				display: flex;
				flex-direction: row;
				height: 100px;
				// margin-bottom: 20px;

				.des {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					border: 1px solid rgba(200, 200, 200, .5);
					padding: 10px;
					box-sizing: border-box;
				}

				.desImgF {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid rgba(200, 200, 200, .5);
					padding: 10px;
					box-sizing: border-box;

					.desImg {
						width: 13%;
						height: 90%;
						background-size: cover;
						cursor: pointer;
					}
				}
			}
		}
	}

	.goOut {
		position: absolute;
		right: 70px;
		top: 12px;
	}
</style>
